<template>
    <div class="page-warp">
        <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
            :background="isBg"
            :pager-count="pagesCount"
            :small="isSmall"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>

export default {
    props: {
        isSmall: {
            type: Boolean,
            default: false
        },
        isBg: {
            type: Boolean,
            default: true
        },
        total: {
            type: [String, Number],
            default: 1
        },
        pageSizes: {
            type: Array,
            default: () => ([ 10, 50, 100, 200])
        },
        layout: {
            type: String,
            default: 'total, prev, pager, next, jumper'
        },
        pagesCount: {
            type: Number,
            default: 7
        },
        //当前页码
        currentPage: {
            type: Number,
            default: 1
        },
        //一页多少条
        pageSize: {
            type: Number,
            default: 10
        }
    },
    emits: ['handleSizeChange', 'handleCurrentChange', 'update:currentPage', 'update:pageSize'],
    setup (props, { emit }) {
        const handleSizeChange = (val) => {
            emit('update:pageSize', val)
            emit('handleSizeChange', val)
        }
        const handleCurrentChange = (val) => {
            emit('update:currentPage', val)
            emit('handleCurrentChange', val)
        }
        return {
            handleSizeChange,
            handleCurrentChange
        }
    }
}
</script>

<style lang="scss" scoped>
.page-warp{
    margin-top: 20px;
    @include flex(center,flex-end);
    :deep(.el-pagination) {
        position: relative;
        .el-input__suffix{
            right: 8px;
        }
        .select-trigger{
            .el-input{
                width: 100px;
                .el-input__inner{
                    height: 32px;
                }
            }
        }
    }
}
</style>